<template>
    <el-row>
      <el-col :span="12">
        <div class="grid-content ep-bg-purple-dark" />
        <el-card>
          <div id="top5DnameAndCountDiv" style="width: 600px;height: 450px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="top5PnameAndCountDiv" style="width: 600px;height: 450px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </template>
  <script setup>
  import adminApi from "@/api/adminApi";
  import * as echarts from "echarts";
  import { onMounted } from "vue";
  
  // 定义函数显示图表
  function chcra01() {
    adminApi.top5()
     .then((resp) => {
        let data = new Array();
        let count = new Array();
  
        for (let index = 0; index < resp.data.length; index++) {
          data.push(resp.data[index].dname);
          count.push(resp.data[index].count);
        }
  
        var myChart = echarts.init(document.getElementById("top5DnameAndCountDiv"));
  
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: "前5的部门和人数占比",
            textStyle: {
              color: "#000000",
              fontWeight: "lighter",
            },
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "部门人数占比",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "40",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: data.map((item, index) => ({
                value: count[index],
                name: item,
              })),
            },
          ],
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
  }
  
  onMounted(() => {
    chcra01();
  });
  
  function chart02() {
    adminApi.rtop5().then((resp) => {
      let data = [];
      let count = [];
  
      for (let index = 0; index < resp.data.length; index++) {
        data.push(resp.data[index].rname);
        count.push(resp.data[index].count);
      }
  
      const myChart = echarts.init(
        document.getElementById("top5PnameAndCountDiv")
      );
  
      const option = {
        title: {
          text: "参与维修事件总数前五的维修人员",
          textStyle: {
            color: "#000000",
            fontWeight: "lighter",
          },
        },
        legend: {
          data: ["维修项目总数"],
          right: "10%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#000000",
          },
        },
        xAxis: {
          data: data,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000000",
              width: 1,
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000000",
              width: 1,
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "维修项目总数",
            type: "bar", // 修改为柱状图
            data: count,
            barWidth: 30, // 设置柱子宽度
            itemStyle: {
              normal: {
                color: function (params) {
                  // 可以根据需要设置不同柱子的颜色
                  let colorList = [
                    "#4B0082",
                    "#800080",
                    "#8B0000",
                    "#FF0000",
                    "#FF6347",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
  
      myChart.setOption(option);
    });
  }
  
  onMounted(() => {
    chart02();
  });
  </script>
  <style scoped></style>